import React, { useEffect, useState, useRef } from "react";
import { Input, Layout, Button, Radio, Skeleton, Switch, Card, Avatar, Tree, Table, Space } from 'antd';
import { request } from 'dw-mx-request';
import { useHistory, useLocation } from 'dw-mx-router';
import './style/dataSource.css';

export default function DataSourceIndex(props) {

    const { Sider } = Layout;
    const { Search } = Input;
    const history = useHistory();
    const [linkText, setLinkText] = useState('');


    useEffect(() => {
    }, []);

    //关键字搜索
    const keywordSearch = (val) => {
        alert(val);
    };

    //点击树节点
    const selectTreeNode = (node, e) => {
        console.log(node);
        console.log(e);
        setLinkText(e.node.title);
    };

    //点击测试
    const clickTest = (data) => {
        console.log(data);
    };

    //点击编辑
    const clickEdit = (data) => {
        console.log(data);
        history.push('/Detail');
    };

    //点击删除
    const clickDelete = (data) => {
        console.log(data);
    };

    const treeData = [
        {
            title: '数据源',
            key: '0-0',
            children: [
                {
                    title: '社保',
                    key: '0-0-0',
                },
                {
                    title: '医保',
                    key: '0-0-1',
                },
                {
                    title: '区块链',
                    key: '0-0-2',
                },
                {
                    title: '大数据',
                    key: '0-0-3',
                }
            ],
        },
    ];

    const data = [
        {
            key: '001',
            name: '社保一',
            testAddress: 'http://10.1.91.235:7777/sidsu',
            produceAddress: 'http://10.1.10.1:7000/sidsu',
        },
        {
            key: '002',
            name: '社保二',
            testAddress: 'http://10.1.91.235:8181/midsu',
            produceAddress: 'http://10.1.10.1:8000/midsu',
        },
        {
            key: '003',
            name: '区块链',
            testAddress: 'http://10.1.90.222:8080/dbc',
            produceAddress: 'http://10.1.10.1:8080/dbc',
        },
        {
            key: '004',
            name: '大数据',
            testAddress: 'http://10.1.91.100:7080/siom',
            produceAddress: 'http://10.1.10.1:8180/siom',
        },
    ];

    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '测试地址',
            dataIndex: 'testAddress',
            key: 'testAddress',
        },
        {
            title: '生产地址',
            dataIndex: 'produceAddress',
            key: 'produceAddress',
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <a onClick={()=>clickTest(record)}>测试</a>
                    <a onClick={()=>clickEdit(record)}>编辑</a>
                    <a onClick={()=>clickDelete(record)}>删除</a>
                </Space>
            ),
        },
    ];

    return (
        <>
            <Layout style={{height: '100%'}}>
                <Sider theme={'light'}>
                    <div className={'dlc-ds-left-navigate'}>
                        <div className={'dlc-ds-left-navigate-text'}>导航</div>
                        <div className={'dlc-ds-left-navigate-text'}>{linkText}</div>
                    </div>
                    <Tree
                        showIcon
                        showLine={true}
                        defaultExpandAll
                        defaultSelectedKeys={['0-0-0']}
                        treeData={treeData}
                        onSelect={(node, e)=>selectTreeNode(node, e)}
                    />
                </Sider>
                <Layout>
                    <div className={'dlc-ds-right-search'}>
                        <Search placeholder="数据源名称关键字查询" onSearch={(val)=>keywordSearch(val)} style={{ width: 400, marginLeft: 10, marginRight: 30 }} />
                        <Button>新增</Button>
                    </div>
                    <div className={'dlc-ds-right-table'}>
                        <Table columns={columns} dataSource={data} />
                    </div>
                </Layout>
            </Layout>
        </>
    );
}